<template>
<div class="test">
  <el-card v-for="(item, index) in list" :key="index" class="box-card">
    <template #header>
      <div class="card-header">
        <span>{{ item.name }}</span>
        <el-button :icon="CircleCheck" text class="is-done" :style="`${item.done ? 'color: rgb(100, 182, 135)' : ''}`"></el-button>
      </div>
    </template>
    <div v-for="(el, inx) in item.diyData" :key="inx" class="text item">
      <span>{{ el.cn }}</span>
      <span>{{ el.value }}</span>
    </div>
    <div>
      <span>余额：</span>
      <span>{{ balance(item.diyData) }}</span>
    </div>
  </el-card>
</div>
</template>
<script lang="ts" setup>
import { CircleCheck } from '@element-plus/icons-vue'
import { ref, computed } from "vue";
const mockData = [
  {
    name: '一月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '二月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '三月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '四月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '五月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '六月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '七月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '八月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '九月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '十月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '十一月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  },
  {
    name: '十二月',
    done: 1,
    diyData: [
      {
        en: 'income',
        cn: '总收入',
        value: 32000
      },
      {
        en: 'payment',
        cn: '总支出',
        value: 15000
      }
    ]
  }
]
const balance = computed(() => (data: any[]) => {
  return data[0].value - data[1].value
})
const xxx = ref<string>("page2222222222");
const list = ref<any[]>(mockData)
</script>
<style lang="less" scoped>
.test {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  // overflow: auto;
}
.is-done {
  font-size: 20px;
  color: #bbb;
}
.mp {
  background-color: #eee;
  margin: 2vh;
  height: 15vh;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 600px;
}
</style>